<template>
  <el-container>
    <!--头部-->
    <el-header>
      <Header></Header>
    </el-header>

    <!--主体部分-->
    <el-main>
      <div class="login_box">
        <!-- 选择区域 -->
        <div class="checks">
          <a :class="font" href="javascript:;" @click="toLogin">登陆</a>
          <a :class="nofont" href="javascript:;" @click="toReg">注册</a>
        </div>

        <div clas="formDiv">
          <!-- 登录表单区域 -->
          <el-form :class="loginB" ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px"
            class="login_form">
            <!-- 手机号码 -->
            <el-form-item prop="phone">
              <el-input placeholder="请输入手机号码" prefix-icon="el-icon-phone" v-model="loginForm.phone" />
            </el-form-item>
            <!-- 密码 -->
            <el-form-item :inline="true" prop="password">
              <el-input @keyup.enter="login" placeholder="请输入密码" prefix-icon="el-icon-s-goods" v-model="loginForm.password"
                type="password" />
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item class="btns">
              <el-button type="primary" @click="login">登录</el-button>
              <el-button type="info" @click="resetLoginForm">重置</el-button>
            </el-form-item>
          </el-form>

          <!-- 注册板块区域 -->
          <el-form :class="regB" ref="regFormRef" :model="regForm" :rules="regFormRules" label-width="0px" class="login_form">
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input placeholder="请输入用户名" prefix-icon="el-icon-user-solid" v-model="regForm.username" />
            </el-form-item>
            <!-- 手机号码 -->
            <el-form-item prop="phone">
              <el-input placeholder="请输入手机号码" prefix-icon="el-icon-phone" v-model="regForm.phone" />
            </el-form-item>
            <!--密码-->
            <el-form-item prop="password">
              <el-input placeholder="请输入密码" type="password" v-model="regForm.password" prefix-icon="el-icon-s-goods" />
            </el-form-item>
            <!--确认码-->
            <el-form-item prop="checkPassword">
              <el-input placeholder="请再次输入密码" type="password" v-model="regForm.checkPassword" prefix-icon="el-icon-goods" />
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item class="btns">
              <el-button type="primary" @click="reg">提交</el-button>
              <el-button type="info" @click="resetRegForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

      </div>
    </el-main>

  </el-container>

</template>

<script src="./js/login.js">
 
</script>

<style scoped>
  /* 登陆注册表单样式 */
  @import url("./css/login.css");

  /*中间主体*/
  .el-main {
    position: relative;
    width: 100%;
    height: 706px;
    background: url(../assets/images/bg.jpg) center center no-repeat;
    background-color: #fbfbfb;
    border-top: 2px solid #63ad02;
  }

  /*登陆注册*/
  .loginAndRigter {
    margin: 0 auto;
    justify-content: center;
    width: 450px;
    height: 300px;
    background-color: #0000CC;
  }
</style>
